<template>
	<view class="agent">
		<view class="agent__head">
			<u-search placeholder="请输入商户名称或编号" v-model="merchantNo" shape="square" bg-color="#f6f6f6"
				:show-action="false" @search="searchList()"></u-search>
		</view>
		<scroll-view class="home__grid-group mt-20" scroll-y @scrolltolower="onScrolltolower">
			<view>

				<u-card v-for="(item,index) in list" :key="index">
					<view class="flex  align-center" slot="head">
						<u-image width="40rpx" height="40rpx" :src="thumb"></u-image>
						<view class="flex-1 u-font-15 u-margin-left-10">
							{{item.lsMerchantName}}
						</view>
						<!-- <view class="rate-change" @click="rateChange(item.merchantNo)">
							费率变更
						</view> -->
					</view>
					<view class="" slot="body">

						<view class="u-body-item u-flex  u-p-b-10">
							<view class="u-body-item-title u-line-2">商户编号：</view>
							<view class="">
								{{item.merchantNo}}
							</view>
						</view>
						<view class="u-body-item u-flex  u-p-b-10">
							<view class="u-body-item-title u-line-2">电话：</view>
							<view class="">
								{{item.lsMerchantPhone}}
							</view>
						</view>
						<view class="u-body-item u-flex  u-p-b-10">
							<view class="u-body-item-title u-line-2">注册时间：</view>
							<view class="">
								{{item.createTime}}
							</view>
						</view>
					</view>
					<view class="card-footer" slot="foot">
						<view class="card-footer__btn" @click="goDetail(item)">
							详情
						</view>
					</view>
				</u-card>
				<u-loadmore :status="status" />
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				params: {
					"merStatus": "",
					"merSubName": "",
					"merchantNo": ""
				},
				merchantNo: "",
				pageNo: 1,
				pageSize: "10",
				list: [],
				scrollTop: 0,
				status: "loadmore",
				thumb: "/static/image/home/icon_examine_store.png"
			}
		},
		onReachBottom() {
			this.onScrolltolower();
		},
		mounted() {
			this.merchantInfoQuery();
		},
		methods: {
			goDetail(item) {
				// this.$u.route({
				// 	url: 'pages/main/merchant/merchantDetail',
				// 	params: {
				// 		merchantNo: item.merchantNo
				// 	}
				// })
				uni.navigateTo({
					url: '/packageA/pages/main/merchant/merchantDetail?merchantNo=' + item.merchantNo
				});
			},
			searchList(e) {
				console.log("e" + this.merchantNo)
				this.params.merchantNo = this.merchantNo;
				this.pageNo = 1;
				this.list = [];
				this.merchantInfoQuery();
			},
			onPageScroll(e) {
				this.scrollTop = e.scrollTop;
			},
			onScrolltolower() {
				this.status = "loading";
				this.merchantInfoQuery();
			},
			merchantInfoQuery() {
				const _that = this;
				this.$zx.user_api.merchantInfoQuery(this.pageNo, this.pageSize, this.params).then((data) => {

					console.log("data=" + JSON.stringify(data))
					_that.list = _that.list.concat(data);
					// console.log("data=" + JSON.stringify(_that.terminalList))
					if (data.length !== 0) {
						this.status = "loadmore";
						this.pageNo += 1;
					} else {
						this.status = "nomore";
					}
				});
			},
			rateChange(merchantNo) {
				this.$u.route({
					url: '/packageA/pages/main/merchant/merchantRateChange',
					params: {
						merchantNo: merchantNo
					}
				})
			}
		},

	}
</script>

<style scoped lang="scss">
	.agent {
		background-color: white;

		&__head {
			padding: 10rpx 20rpx;
		}
	}

	.card-footer {
		display: flex;
		flex-direction: row-reverse;

		&__btn {
			border: 1rpx solid #9D60FF;
			color: #9D60FF;
			padding: 10rpx 30rpx;
			border-radius: 50rpx;
		}
	}

	.rate-change {
		color: #9D60FF;
		padding: 10rpx 20rpx;
		background-color: #ebf6fe;
		border-radius: 50rpx;
	}
</style>